import { useState, useEffect, useRef } from 'react';
import { TouchableHighlight, Modal, StyleSheet, TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView, Dimensions, Animated, PanResponder } from 'react-native';
import { Result, Toast } from 'antd-mobile-rn';
import Swiper from 'react-native-swiper'
import { Entypo } from '@expo/vector-icons';
import axios from '../../api/axios';
import { useAuth, baseURL } from '../../context/AuthProvider';
import AsyncStorage from '@react-native-async-storage/async-storage';
// const baseURL = 'http://192.168.253.1:8080'
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: 'center',
                alignItems: 'center',
                padding: 2,
                ...style
            }
        }>
            <Text style={{ color: color, alignItems: 'center' }}>{children}</Text>
        </TouchableOpacity>
    )
}

const GoodDetail = ({ navigation, route }) => {
    const {user} = useAuth()
    const [modalVisible, setModalVisible] = useState(false);
    const [imgs, setImgs] = useState([
        require('../../../images/home/1.png'),
        require('../../../images/home/1.png'),
        require('../../../images/home/1.png'),
        require('../../../images/home/1.png'),
        require('../../../images/home/1.png')
    ]);
    const [goods, setGoods] = useState();
    const [showimg, setShowimg] = useState(require('../../../images/home/1.png'))
    const showToast = () => {
        Toast.info('Hello World', 1);
    };
    const item = route.params.item
    useEffect(() => {
        console.log(55555);
        axios.post('/buy/getdetail', { commodityid: item }).then(res => {
            // console.log(res);
            // console.log(res.imgs);
            // console.log(res.imgs[0].descimg);
            console.log(2142);
            console.log(res);
            setImgs(res.imgs);
            setGoods(res.data[0]);
            // console.log(res.data);
        })
    }, [])
    const getChildrenStyle = (value) => {
        let imageWidth = Image.resolveAssetSource(value).width
        let imageHeight = Image.resolveAssetSource(value).height
        return {
            width: screenW,
            height: (screenW / imageWidth) * imageHeight,
            resizeMode: 'contain'
        };
    }
    return (
        <View style={{ height: screenH-100, width: '100%', justifyContent: 'space-between' }}>
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    Alert.alert("完成");
                    setModalVisible(!modalVisible);
                }}
            >
                <View style={styles.centeredView}>
                    <View style={styles.modalView}>
                        <Text style={styles.modalText}>Hello World!</Text>

                        <TouchableHighlight
                            style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                            onPress={() => {
                                setModalVisible(!modalVisible);
                            }}
                        >
                            <Text style={styles.textStyle}>完成</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            </Modal>
            <ScrollView style={{ width: '100%', height: '100%', backgroundColor: '#fff' }}>
                <View style={{ width: '100%', height: 0.5 * screenH }}>
                    <Swiper style={styles.wrapper} >
                        {
                            imgs ?
                                imgs.map((item) => {
                                    return <View style={styles.slide1}>
                                        <Image style={{ width: '100%', height: '100%' }}
                                            source={{ uri: baseURL +item.descimg }}></Image>
                                        {/* <Text>{item.descimg}</Text> */}
                                    </View>
                                })
                                :
                                <View style={styles.slide1}>
                                    <Image style={{ width: '100%', height: '100%' }}
                                        source={showimg}></Image>
                                    {/* <Text>{item.descimg}</Text> */}
                                </View>
                        }

                    </Swiper>
                </View>
                <View style={{ width: '100%', alignItems: 'center' }}>
                    <View style={{ width: '95%', height: 100, justifyContent: 'center' }}>
                        <Text style={{ fontSize: 25, color: '#df5916' }}>￥{goods ? goods.com_price : ''}</Text>
                        <Text style={{ fontSize: 15, fontWeight: 'bold' }}>{goods ? goods.com_name : ''}</Text>
                    </View>
                    <View style={{ backgroundColor: '#f9f9f9', width: '95%', borderRadius: 5 }}>
                        <View style={styles.miniCon}>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                {/* <MaterialIcons name="list-alt" size={24} color="black" /> */}
                                <Text style={{ fontSize: 13 }}>{goods ? goods.com_place : ''}</Text>
                                <Text style={{ marginLeft: '4%', fontSize: 12 }}>快递：{goods ? goods.express_fee : "免运费"}</Text>
                            </View>
                        </View>
                        <View style={styles.miniCon} >
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <Text style={{ fontSize: 13 }}>7天无理由退货</Text>
                            </View>
                        </View>
                    </View>
                    <View style={{ backgroundColor: '#f9f9f9', width: '95%', margin: 5 }}>
                        <TouchableOpacity style={styles.miniCon} onPress={() => navigation.navigate('evaluation', { commodityid: item })}>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <Text style={{ fontSize: 13 }}>评论</Text>
                            </View>
                            <Entypo name="chevron-thin-right" size={14} color="black" />
                        </TouchableOpacity>
                    </View>
                    <View style={{ backgroundColor: '#f9f9f9', width: '100%', bottom: 0, alignItems: 'center' }}>
                        <View style={{ height: 50, justifyContent: 'center' }}>
                            <Text>宝贝详情</Text>
                        </View>
                        {
                            imgs?
                            imgs.map((item) => {
                                return <Image style={{ width: '100%', height: 500, resizeMode: 'cover' }} source={{ uri: baseURL+item.descimg }}></Image>
                            })
                            :
                            <Image style={{ width: '100%', height: 500, resizeMode: 'cover' }} source={showimg}></Image>
                        }

                        <Image style={getChildrenStyle(require('../../../images/home/1.jpg'))} source={require('../../../images/home/1.jpg')}></Image>
                    </View>
                </View>

            </ScrollView>
            <Btn color='#fff' style={styles.bottomTab} activeOpacity={1} onPress={() => { if(user){navigation.navigate('buy', { commodityid: item })} else{alert("请先登录")} }}>立 即 购 买</Btn>
        </View>
    )
}
const styles = StyleSheet.create({
    wrapper: {},
    slide1: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5'
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    },
    miniCon: {
        margin: '2%',
        alignItems: 'center',
        padding: '2%',
        justifyContent: 'space-between',
        flexDirection: 'row',
    },
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22
    },
    modalView: {
        margin: 20,
        backgroundColor: "white",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5
    },
    openButton: {
        backgroundColor: "#F194FF",
        borderRadius: 20,
        padding: 10,
        elevation: 2
    },
    textStyle: {
        color: "white",
        fontWeight: "bold",
        textAlign: "center"
    },
    modalText: {
        marginBottom: 15,
        textAlign: "center"
    },
    bottomTab: {
        position: 'absolute',
        width: '100%',
        height: 45,
        backgroundColor: '#9AD37A',
        borderTopColor: 'lightgray',
        borderWidth: 1,
        marginTop: screenH - 100,
    }
})
export default GoodDetail